<script lang="ts" setup>
  import { reactive, ref, watchEffect, defineExpose } from 'vue'
  // 数据
  let car = reactive({
    brand: '奔驰',
    price: 280000.00
  });
  let t1 = ref();
  let a = ref(0);
  let b = ref(1);
  let c = ref(2);



  // 方法
  function changeCar () {
    // car.brand = "张三";
    console.log("数据=>", t1.value)
  }
  // 监视  --watchEffect
  watchEffect(() => {
    if (car.brand == '张三') {
      console.log("当前数据=>", car.brand);
    }
  })

  defineExpose({ a, b, c })
</script>

<template>
  <div>
    <h2 ref="t1">一辆：{{car.brand}}车，价值{{car.price}}</h2>
  </div>
  <div>
    <button @click="changeCar()">修改车</button>
  </div>
</template>
<style scoped>
  div h2 {
    background-color: hsl(240, 48%, 75%);
  }
</style>